import {
  autorun,
  extendObservable,
  makeAutoObservable,
  observable,
  reaction,
} from "mobx";
import { observer, useLocalObservable } from "mobx-react-lite";
import { useEffect } from "react";
const DocsPage = observer(() => {
  class Person {
    name: string = "王斌";
    likes: string[] = [];
    constructor() {
      makeAutoObservable(this);
    }
    addProperties(age: number) {
      extendObservable(this, { age });
    }
  }
  const person = new Person();
  person.addProperties(22);

  reaction(
    () => person.age,
    () => {
      console.log("agechanged", person.age);
    }
  );

  const arr = observable.array<string>([], { deep: false });

  autorun(()=>{
    console.log(arr)
  })

  return (
    <div>
      {/* <p onClick={() => (person.age = Math.random())}>{person.age}</p> */}
      <TimerView/>
    </div>
  );
});

const TimerView = observer(() => {
  const timer = useLocalObservable(() => ({
      secondsPassed: 0,
      increaseTimer() {
          this.secondsPassed++
      }
  }))

  // Effect that triggers upon observable changes.
  useEffect(
      () =>
          autorun(() => {
              if (timer.secondsPassed > 60) alert("Still there. It's a minute already?!!")
          }),
      []
  )

  // Effect to set up a timer, only for demo purposes.
  useEffect(() => {
      const handle = setInterval(timer.increaseTimer, 1000)
      return () => {
          clearInterval(handle)
      }
  }, [])

  return <span>Seconds passed: {timer.secondsPassed}</span>
})

export default DocsPage;
